import React from 'react';
import PropTypes from 'prop-types'
import './range.css'
import Config from "../../Config";

class Range extends React.Component {
    static propTypes = {
        minValue: PropTypes.number.isRequired,
        maxValue: PropTypes.number.isRequired,
        unit: PropTypes.string.isRequired,
        handleChange: PropTypes.func.isRequired,
        step: PropTypes.number.isRequired,
        style: PropTypes.object
    };

    componentWillMount() {
    }
    componentDidMount() {
    }
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <div style={{width:'100%', display:'flex', alignItems:'center',...this.props.style}}>
                <input type="range" defaultValue={0} className={"range"}
                    style={{
                        background: `linear-gradient(${Config.BaseColor}, ${Config.BaseColor}) no-repeat`,
                        backgroundSize: '0% 100%',
                    }}
                    min={this.props.minValue} max={this.props.maxValue}
                    step={this.props.step}
                    onChange={(e) => {
                        this.changeColor(e);
                        this.props.handleChange(e)
                    }}
                />
            </div>
        );
    }

    changeColor(e) {
        let v = (Number.parseInt(e.target.value) - this.props.minValue) / (this.props.maxValue-this.props.minValue);
        e.target.style.backgroundSize = v*100 + '% 100%'
    }
}

export default Range;